<template>
  <div class="page-main"  v-title :data-title="dataTitle?dataTitle:'验收付款单'">
    <home-nav :userData="userinfo"></home-nav>
    <div class="container" ref="imageWrapper">
      <div class="head-content">
        <span class="bold-font">合同验收付款审批表</span>
        <ul>
          <li v-if="task.currentHandlerUser == '1' || checkPermission(['WORK_REPORT_MANAGER', 'WORK_REPORT_ACCEPTER'])"
            @click="toTaskDetail">
            <a-icon type="file-search" />
            报工单详情
          </li>
          <li v-if="task.currentHandlerUser == '1' || checkPermission(['WORK_REPORT_MANAGER', 'WORK_REPORT_ACCEPTER'])"
            @click="toContractAttach">
            <a-icon type="link" />
            合同附件
          </li>
          <li @click="openSettlementDetail">
            <a-icon type="link" />
            核算表
          </li>
          <li @click="toTaskList">
            <a-icon type="link" />
            报工任务单
          </li>
        </ul>
        <div class="btn-line">
          <a-button v-if="checkPermission(['WORK_REPORT_ADMIN'])" class="hte-btn add-btn" type="primary"
            @click="updateStatus">更新审批状态</a-button>
          <a-button class="hte-btn add-btn" type="primary" @click="print">打印</a-button>
          <a-button v-if="
            (task.currentHandlerUser == '1' || checkPermission(['WORK_REPORT_MANAGER', 'WORK_REPORT_ACCEPTER'])) &&
            (!payment.status || payment.status == '0' || payment.status == '3')
          " class="hte-btn add-btn" type="primary" @click="handleSave">保存</a-button>
          <a-button v-if="
            (task.currentHandlerUser == '1' || checkPermission(['WORK_REPORT_MANAGER', 'WORK_REPORT_ACCEPTER'])) &&
            (!payment.status || payment.status == '0' || payment.status == '3')
          " class="hte-btn" @click="handleSubmit">提交审批</a-button>
        </div>
      </div>
      <div class="content">
        <a-form-model ref="ruleForm" :model="payment" :rules="rules">
          <section>
            <div class="section-header">{{ payment.isSendPay != 1 ? '合同基本' : '付款申请' }}信息</div>
            <a-row :gutter="24">
              <a-col :span="8">
                <a-form-model-item label="申请流水号">
                  <a-input v-model="payment.applyNo" disabled placeholder="自动带入" />
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="申请人">
                  <a-input v-model="payment.applyUserName" disabled placeholder="自动带入" />
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="申请时间">
                  <a-date-picker disabled valueFormat="YYYY-MM-DD" v-model="payment.applyTime" placeholder="自动带入" />
                </a-form-model-item>
              </a-col>
            </a-row>
            <a-row :gutter="24">
              <a-col :span="8">
                <a-form-model-item label="合同编号">
                  <a-input disabled v-model="project.contractNumber" placeholder="自动带入" />
                </a-form-model-item>
              </a-col>
              <a-col :span="16">
                <a-form-model-item label="合同名称">
                  <a-input disabled v-model="project.contractName" placeholder="自动带入" />
                </a-form-model-item>
              </a-col>
            </a-row>
            <a-row :gutter="24">
              <a-col :span="8">
                <a-form-model-item label="合同总金额">
                  <a-input disabled v-model="project.amount" placeholder="自动带入" />
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="签订公司">
                  <a-input disabled v-model="project.signCompany" placeholder="自动带入" />
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="供应商名称">
                  <a-input disabled v-model="project.supplierName" placeholder="自动带入" />
                </a-form-model-item>
              </a-col>
            </a-row>
            <a-row :gutter="24">
              <a-col :span="8">
                <a-form-model-item label="采购订单号">
                  <a-input disabled v-model="project.busKey" placeholder="自动带入" />
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="费用支出号">
                  <a-input disabled placeholder="自动带入" v-model="task.costNumber" />
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="所属项目名称">
                  <a-input disabled v-model="project.projectCode" placeholder="自动带入" />
                </a-form-model-item>
              </a-col>
            </a-row>
            <a-row :gutter="24">
              <a-col :span="8">
                <a-form-model-item label="项目经理" prop="proManager">
                  <UserInputSelector
                    :username.sync="payment.proManagerId"
                    :realname.sync="payment.proManager"
                    multiple="multiple"
                    placeholder="请选择"
                  />
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="合同签订人">
                  <a-input disabled v-model="project.signUser" placeholder="自动带入" />
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="合同跟进专员">
                  <a-input disabled v-model="project.createOrderUser" placeholder="自动带入" />
                </a-form-model-item>
              </a-col>
            </a-row>
          </section>
          <section>
            <div class="section-header">节点完成情况</div>
            <a-row :gutter="24">
              <a-col :span="24">
                <a-form-model-item label="工期节点内容">
                  <a-input v-model="task.nodeContent" disabled placeholder="自动带入" />
                </a-form-model-item>
              </a-col>
            </a-row>
            <a-row :gutter="24">
              <a-col :span="24">
                <a-form-model-item label="付款节点内容">
                  <a-input v-model="task.paymentContent" disabled placeholder="自动带入" />
                </a-form-model-item>
              </a-col>
            </a-row>
            <a-row :gutter="24">
              <a-col :span="8">
                <a-form-model-item label="项目负责人">
                  <a-input disabled v-model="task.handlerUser" placeholder="自动带入" />
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="付款节点标志">
                  <a-input disabled :value="task.isPayNode == '1' ? '是' : '否'" placeholder="自动带入" />
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="合同节点标志">
                  <a-input disabled v-model="task.nodeIdentify" placeholder="自动带入" />
                </a-form-model-item>
              </a-col>
            </a-row>
            <a-row :gutter="24">
              <a-col :span="8">
                <a-form-model-item class="col-input-2 col-input-font" label="工期节点进度">
                  <a-select disabled v-model="result.nodeStatus">
                    <a-select-option v-for="(item, index) in codes.WorkReportResultStatus" :key="'nodeStatus' + index"
                      :value="item.code">
                      {{ item.name }}
                    </a-select-option>
                  </a-select>
                  <a-input v-if="result.nodeStatus == '逾期'" disabled v-model="result.nodeDelayDays"
                    placeholder="自动带入" />
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item ref="delayReason" label="逾期责任方">
                  <a-select disabled v-model="result.delayReason">
                    <a-select-option v-for="(item, index) in codes.WorkReportDelayReson" :key="'delayReason' + index"
                      :value="item.code">
                      {{ item.name }}
                    </a-select-option>
                  </a-select>
                  <a-input disabled v-if="result.delayReason == '双方'" v-model="result.delayDays" placeholder="自动带入"
                    addonBefore="甲方逾期" suffix="天" />
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="工期节点质量">
                  <a-select disabled v-model="result.result">
                    <a-select-option v-for="(item, index) in codes.WorkReportResultType" :key="'result' + index"
                      :value="item.code">
                      {{ item.name }}
                    </a-select-option>
                  </a-select>
                </a-form-model-item>
              </a-col>
            </a-row>
            <a-row :gutter="24">
              <a-col :span="8">
                <a-form-model-item label="凭保证函付款" prop="payByLetter">
                  <a-select :disabled="payment.status && payment.status != 0 && payment.status != 3"
                    v-model="payment.payByLetter">
                    <a-select-option v-for="(item, index) in yesOrNo" :key="'payByLetter' + index" :value="item">
                      {{ item }}
                    </a-select-option>
                  </a-select>
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="合同资料情况" prop="fileCondition">
                  <a-select :disabled="payment.status && payment.status != 0 && payment.status != 3"
                    v-model="payment.fileCondition">
                    <a-select-option v-for="(item, index) in codes.FileCondition" :key="'fileCondition' + index"
                      :value="item.code">
                      {{ item.name }}
                    </a-select-option>
                  </a-select>
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="项目所在地" :prop="task.nodeIdentify != '验收' ? '' : 'projectAddr'">
                  <a-input :disabled="payment.status && payment.status != 0 && payment.status != 3"
                    v-model="payment.projectAddr" placeholder="填写所在城市地名" />
                </a-form-model-item>
              </a-col>
            </a-row>
            <a-row :gutter="24">
              <a-col :span="8">
                <a-form-model-item label="验收参与部门" :prop="task.nodeIdentify != '验收' ? '' : 'acceptDept'">
                  <a-input :disabled="payment.status && payment.status != 0 && payment.status != 3"
                    v-model="payment.acceptDept" placeholder="填写验收参与部门" />
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="验收参与人" :prop="task.nodeIdentify != '验收' ? '' : 'acceptUserName'">
                  <a-input :disabled="payment.status && payment.status != 0 && payment.status != 3"
                    v-model="payment.acceptUserName" placeholder="填写验收参与人" />
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="设备所在位置" :prop="task.nodeIdentify != '验收' ? '' : 'equipmentAddr'">
                  <a-input :disabled="payment.status && payment.status != 0 && payment.status != 3"
                    v-model="payment.equipmentAddr" placeholder="填写设备设施位置，没有则填'无'" />
                </a-form-model-item>
              </a-col>
            </a-row>
            <a-row :gutter="24">
              <a-col :span="8">
                <a-form-model-item label="使用部门成本中心" :prop="payment.handlerStep == '使用部门' ? 'costNumber' : ''">
                  <a-input :disabled="payment.handlerStep != '使用部门'" v-model="payment.costNumber"
                    placeholder="使用部门填写" />
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="质保期限" :prop="task.nodeIdentify != '验收' ? '' : 'warrantyYears'">
                  <a-input :disabled="payment.status && payment.status != 0 && payment.status != 3"
                    v-model="payment.warrantyYears" style="width: 100%" placeholder="合同中约定的质保期，如24个月(请填写整数月数)"
                    type="number" suffix="个月" @change="changeWarrantyYears" />
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="质保到期日">
                  <a-date-picker :disabled="
                    payment.status &&
                    payment.status != 0 &&
                    payment.status != 3 &&
                    payment.handlerStep != '合同跟进专员'
                  " style="width: 100%" valueFormat="YYYY-MM-DD" placeholder="合同跟进人填写"
                    v-model="payment.warrantyTime" />
                </a-form-model-item>
              </a-col>
            </a-row>
            <a-row :gutter="24">
              <a-col :span="24">
                <a-form-model-item label="验收补充说明">
                  <a-input :disabled="payment.status && payment.status != 0 && payment.status != 3"
                    v-model="payment.taskRemmark" />
                </a-form-model-item>
              </a-col>
            </a-row>
          </section>
          <section v-if="!process.taskDefKey || (process.taskDefKey != 'userDept' && process.taskDefKey != 'keepDept')">
            <div class="section-header">
              合同付款信息<span
                style="font-size: 12px; color: red; padding-left: 20px; font-weight: normal">由合同跟进专员根据质量通知单审批更新付款信息</span>
            </div>
            <a-row :gutter="24">
              <a-col :span="8">
                <a-form-model-item class="col-input-2" label="PO单行号">
                  <a-input v-model="task.poLine" disabled />
                  <a-input v-model="project.poLineCountCopy" disabled />
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="节点金额(含税)">
                  <a-input disabled v-model="task.paymentAmount" placeholder="单位：元" />
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="水电费承担方">
                  <div class="disabled-radio">
                    <a-radio-group disabled v-model="project.waterAndElectricityPay">
                      <a-radio v-for="(item, index) in waterAndElectricityPayOptions"
                        :key="'waterAndElectricityPay' + index" :value="item.value">{{ item.label }}
                      </a-radio>
                    </a-radio-group>
                  </div>
                </a-form-model-item>
              </a-col>
            </a-row>
            <a-row :gutter="24">
              <a-col :span="8">
                <a-form-model-item label="税率">
                  <a-input disabled v-model="task.taxRate" placeholder="自动带入" suffix="%" />
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="本次支付金额(含税)">
                  <a-input
                    :disabled="process.taskDefKey != 'FOLLOW_USER_NODE' && process.taskDefKey != 'PURCHASE_DEPT_USER'"
                    v-model="payment.payAmount" placeholder="单位：元，自动计算，可修改" />
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="本次过账金额(含税)">
                  <a-input
                    :disabled="process.taskDefKey != 'FOLLOW_USER_NODE' && process.taskDefKey != 'PURCHASE_DEPT_USER'"
                    v-model="payment.postAmount" placeholder="单位：元，自动计算，可修改" />
                </a-form-model-item>
              </a-col>
            </a-row>

            <a-row :gutter="24">
              <a-col :span="24">
                <a-form-model-item label="付款补充说明">
                  <a-input
                    :disabled="process.taskDefKey != 'FOLLOW_USER_NODE' && process.taskDefKey != 'PURCHASE_DEPT_USER'"
                    v-model="payment.remark" placeholder="填写补充说明信息" />
                </a-form-model-item>
              </a-col>
            </a-row>
            <a-row :gutter="24">
              <a-col :span="8">
                <a-form-model-item label="是否数字贷：">
                  <a-radio-group name="radioGroup" v-model="project.digitalLoan" disabled>
                    <a-radio v-for="(code, index) in yesOrNot" :key="index" :value="code.code">
                      {{ code.name }}
                    </a-radio>
                  </a-radio-group>
                </a-form-model-item>
              </a-col>
              <a-col :span="16">
                <a-form-model-item label="备案证名称：">
                  <a-input disabled
                    v-model="project.filingName" />
                </a-form-model-item>
              </a-col>
            </a-row>
            <div class="line-section">
              <div>
                <span>质量通知单累计扣罚金额:</span>
                <span>扣罚金额合计（元）：<i>{{ payment.fineAmount }}</i></span>
                <span>减少开票金额（元）：<i>{{ payment.reduceAmount }}</i></span>
                <span>
                  <a-button type="link" @click="toQualityListByPo">质量通知单列表</a-button>
                </span>
              </div>
              <div>
                <a-icon type="sync" @click="fetchQualityList" />
              </div>
            </div>
            <a-table class="hte-table-content" :columns="columns" :data-source="qualityRecords" rowKey="id" bordered
              size="middle" :pagination="false" @change="handleTableChange">
              <span slot="qualityTypeRender" slot-scope="text, record">
                <a-select disabled mode="multiple" :value="record.qualityType ? record.qualityType.split(',') : []">
                  <a-select-option v-for="(item, index) in qualityTypeOptions" :key="'qualityType' + index"
                    :value="item.value">
                    {{ item.label }}
                  </a-select-option>
                </a-select>
              </span>
              <span slot="qualityNoRender" slot-scope="text, record">
                <span class="font-active" @click="toQuality(record)">{{ record.qualityNo }}</span>
              </span>
              <span slot="oaLshRender" slot-scope="text, record">
                <span class="font-active" @click="toQuality(record)">{{ text }}</span>
              </span>
              <span slot="reduceRender" slot-scope="text, record, index">
                <a-select
                  :disabled="process.taskDefKey != 'FOLLOW_USER_NODE' && process.taskDefKey != 'PURCHASE_DEPT_USER'"
                  v-model="qualityRecords[index].reduce" @change="toCalcReduce(index, 'reduce')">
                  <a-select-option v-for="(item, iindex) in reduceOption" :key="'reduce' + iindex" :value="item.value">
                    {{ item.label }}
                  </a-select-option>
                </a-select>
              </span>
              <span slot="fineRender" slot-scope="text, record, index">
                <a-select
                  :disabled="process.taskDefKey != 'FOLLOW_USER_NODE' && process.taskDefKey != 'PURCHASE_DEPT_USER'"
                  v-model="qualityRecords[index].fine" @change="toCalcReduce(index, 'fine')">
                  <a-select-option v-for="(item, iindex) in fineOption" :key="'fine' + iindex" :value="item.value">
                    {{ item.label }}
                  </a-select-option>
                </a-select>
              </span>
              <template slot="statusRender" slot-scope="text, record">
                <a-select disabled :value="record.status + ''" style="width: 100%">
                  <a-select-option v-for="(code, index) in codes.WorkReportQualityStatus" :key="index"
                    :value="code.code">
                    {{ code.name }}
                  </a-select-option>
                </a-select>
              </template>
            </a-table>
          </section>
        </a-form-model>
        <section v-if="payment.id">
          <div class="section-header">附件列表</div>
          <PaymentWorkAttachList busType="ITEM_PAYMENT" :busKey="payment.id + ''" :taskId="task.id"
            :permission="permission" :payment="payment" />
        </section>
        <section v-if="flow.flowId">
          <div class="section-header">审批记录</div>
          <div style="display: flex; margin-bottom: 10px">
            <a-button class="hte-btn add-btn" type="primary" @click="showPaymentFlowTips = true">审批流程指引</a-button>
          </div>
          <ht-approval ref="childrenRef" :process-instance-id="flow.flowId" :custom="custom" :options="options"
            @submit="afterSubmit" @reject="afterReject" @back="backAction" @cancelSubmit="afterCancelSubmit"
            :before-fill-opinion="saveNotifyOpinion" :before-submit="beforeSubmit" :before-reject="beforeReject"
            :show-task-history="true" :history-dialog="historyDialog" :task-load="taskLoad" :message-id="messageId"
            :showPrintBtn="showPrintBtn" :show-upload-btn="false" :hidden-task-def-key="hiddenTaskDefKey"
            :snapshotConfigs="snapshotConfigs" :print="print">
          </ht-approval>
          <a-modal title="审批流程指引" :visible="showPaymentFlowTips" @ok="showPaymentFlowTips = false"
            @cancel="showPaymentFlowTips = false" width="80vw" :maskClosable="false">
            <img src="~@assets/payment_flow_tips.png" />
          </a-modal>
        </section>
      </div>
    </div>
    <!-- <DeptSelector :show="showDeptSelector" @selected="selectDept" /> -->
    <UserSelector :show="showUserSelector" :deptCode="deptCode" :muti="muti" @selected="selectUser" />
    <ProcessUserSelect @selectUserConfirm="selectUserConfirm" ref="ProcessUserSelect" />
    <!-- 打印页面排版 -->
    <div style="display: none">
      <div ref="printContainer" id="printContainer" style="width: 690px">
        <div class="pageTitle">合同验收付款审批表</div>
        <table border="1" cellspacing="1" cellpadding="0">
          <tbody>
            <tr>
              <td class="label" colspan="6" style="text-align: left">合同基本信息:</td>
            </tr>
            <tr>
              <td class="label">申请流水号</td>
              <td>{{ payment.applyNo }}</td>
              <td class="label">申请人</td>
              <td>{{ payment.applyUserName }}</td>
              <td class="label">申请时间</td>
              <td>{{ formatDate(payment.applyTime || '', 'yyyy-MM-dd') }}</td>
            </tr>
            <tr>
              <td class="label">合同编号</td>
              <td>{{ project.contractNumber }}</td>
              <td class="label">合同名称</td>
              <td colspan="3">{{ project.contractName }}</td>
            </tr>
            <tr>
              <td class="label">合同总金额</td>
              <td>{{ project.amount }}</td>
              <td class="label">签订公司</td>
              <td>{{ project.signCompany }}</td>
              <td class="label">供应商名称</td>
              <td>{{ project.supplierName }}</td>
            </tr>
            <tr>
              <td class="label">采购订单号</td>
              <td>{{ project.busKey }}</td>
              <td class="label">费用支出号</td>
              <td colspan="3">{{ task.costNumber }}</td>
            </tr>
            <tr>
              <td class="label">付款节点内容</td>
              <td colspan="5">{{ task.paymentContent }}</td>
            </tr>
            <!-- 合同付款信息 -->
            <tr>
              <td class="label" colspan="6" style="text-align: left">合同付款信息:</td>
            </tr>
            <tr>
              <td class="label">PO单行号</td>
              <td>{{ task.poLine }}</td>
              <td class="label">节点金额（含税）</td>
              <td>{{ task.paymentAmount }}</td>
              <td class="label">水电费承担方</td>
              <td>
                <span v-for="(item, index) in waterAndElectricityPayOptions"
                  :key="'waterAndElectricityPayOptionsA' + index"
                  v-show="project.waterAndElectricityPay == item.value">{{ item.label }}
                </span>
              </td>
            </tr>
            <tr>
              <td class="label">税率</td>
              <td>{{ task.taxRate + '%' }}</td>
              <td class="label">本次支付金额（含税）</td>
              <td>{{ payment.payAmount }}</td>
              <td class="label">本次过账金额（含税）</td>
              <td>{{ payment.postAmount }}</td>
            </tr>
            <tr>
              <td class="label">付款补充说明</td>
              <td colspan="5">{{ payment.remark }}</td>
            </tr>
            <!-- 累计扣罚金额 -->
            <tr>
              <td class="label" colspan="6" style="text-align: left">累计扣罚金额:</td>
            </tr>
            <tr>
              <td class="label">质量通知单号</td>
              <td class="label">OA流水号</td>
              <td class="label">违约类型</td>
              <td class="label">审批扣罚金额</td>
              <td class="label">开票金额</td>
              <td class="label">本次扣罚</td>
            </tr>
            <tr v-show="qualityRecords.length > 0" v-for="(item, index) in qualityRecords" :key="index">
              <td>{{ item.qualityNo }}</td>
              <td>{{ item.oaLsh }}</td>
              <td>
                <span v-for="(type, index) in qualityTypeOptions" :key="'qualityTypeA' + index"
                  v-show="item.qualityType && item.qualityType.split(',').indexOf(type.value)">
                  {{ type.label }}
                </span>
              </td>

              <td>{{ item.spFineAmount }}</td>
              <td>
                <span v-for="(reduce, iindex) in reduceOption" :key="'reduceA' + iindex"
                  v-show="reduce.value == item.reduce">
                  {{ reduce.label }}
                </span>
              </td>
              <td>
                <span v-for="(fine, iindex) in fineOption" :key="'fineA' + iindex" v-show="fine.value == item.fine">
                  {{ fine.label }}
                </span>
              </td>
            </tr>
            <tr v-show="!qualityRecords || qualityRecords.length == 0">
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
            </tr>

            <!-- 审批意见 -->
            <tr>
              <td class="label" colspan="6" style="text-align: left">审批意见:</td>
            </tr>
            <tr v-show="comments.length > 0" v-for="(item, index) in comments" :key="'process' + index">
              <td class="label">{{ item.taskDefKey }}</td>
              <td colspan="5">
                <div style="padding: 5px 10px">
                  <div style="height: 30px">
                    {{ item.fullMessage }}
                  </div>
                  <div style="display: flex; justify-content: flex-end">
                    <span style="padding: 2px 5px; width: 120px"> 签名：{{ item.userName }} </span>
                    <span style="padding: 2px 5px; width: 130px">
                      日期：{{ formatDate(item.time || '', 'yyyy-MM-dd') }}
                    </span>
                    <span style="padding: 2px 5px; width: 70px">
                      {{ item.taskMessage }}
                    </span>
                  </div>
                </div>
              </td>
            </tr>
            <tr v-show="!comments || comments.length == 0">
              <td></td>
              <td colspan="5"></td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    <SettlementDetail :show="showSettlementDetail" :supplierCode="project.supplierCode" :wbs="task.costNumber"
      :taskInfoId="task.id" @close="closeSettlementDetail" :edit="false" />
  </div>
</template>

<script>
import { getAction, postAction, getActionAsync } from '@/api/manage'
import { formatDate,calcDaysBetween } from '@/utils/util'
import { FlowMixin } from '@/mixins/FlowMixin'
export default {
  mixins: [FlowMixin],
  props: {
    paymentId: {
      type: String,
      default: '-1',
    },
    taskId: {
      type: String,
      default: '-1',
    },
  },
  components: {
    HomeNav: () => import('@/components/layouts/HomeNav'),
    PaymentWorkAttachList: () => import('@/views/workReport/attach/PaymentWorkAttachList'),
    DeptSelector: () => import('@/views/workReport/role/DeptSelector'),
    UserSelector: () => import('@/views/workReport/role/UserSelector'),
    ProcessUserSelect: () => import('@/components/tools/ProcessUserSelect'),
    htApproval: () => import('@/config/ht-approval.umd.min.js'),
    SettlementDetail: () => import('@/views/workReport/util/SettlementDetail'),
  },
  data() {
    return {
      dataTitle:this.$route?this.$route.name:"",
      snapshotConfigs: [
        {
          type: 'ref',
          value: 'imageWrapper',
        },
      ],
      userinfo: {
        info: this.$store.getters.userInfo,
        module: 'ContractReportInfo',
      },
      rules: {
        payByLetter: [{ required: true, message: '请选择', trigger: 'blur' }],
        fileCondition: [{ required: true, message: '请选择', trigger: 'blur' }],
        projectAddr: [{ required: true, message: '请输入', trigger: 'blur' }],
        acceptDept: [{ required: true, message: '请输入', trigger: 'blur' }],
        acceptUserName: [{ required: true, message: '请输入', trigger: 'blur' }],
        equipmentAddr: [{ required: true, message: '请输入', trigger: 'blur' }],
        warrantyYears: [{ required: true, message: '请输入', trigger: 'blur' }],
        costNumber: [{ required: true, message: '请输入', trigger: 'blur' }],
        proManager: [{ required: true, message: '请选择', trigger: 'blur' }],
      },
      payment: { payByLetter: '否' },
      nodeStatusOptions: ['逾期', '正常'],
      delayReasonOptions: ['甲方', '乙方', '双方'],
      resultOptions: ['完成', '质量合格'],
      yesOrNo: ['是', '否'],
      waterAndElectricityPayOptions: [
        { value: '1', label: '甲方' },
        { value: '2', label: '乙方' },
      ],
      reduceOption: [
        { label: '不变', value: '0' },
        { label: '减少', value: '1' },
      ],
      fineOption: [
        { label: '否', value: '0' },
        { label: '是', value: '1' },
      ],
      billTypeOptions: [
        { value: 1, label: '扣罚类(含非扣罚的质量问题)' },
        { value: 2, label: '非扣罚类' },
      ],
      qualityTypeOptions: [
        { value: '1', label: '质量投诉' },
        { value: '2', label: '现场管理投诉' },
        { value: '3', label: '安全事故' },
        { value: '4', label: '进度' },
        { value: '5', label: '延期申请' },
      ],
      yesOrNot: [{ code: false, name: "否" }, { code: true, name: "是" }],
      urls: {
        payment: '/workReport/payment/info',
        editPayment: '/workReport/payment/edit',
        task: '/workReport/task/info',
        project: '/workReport/project/info',
        result: '/workReport/taskResult/infoByType',
        psQualityList: '/hte/contract/qualityList',
        hteQualityList: '/workReport/quality/list',
        getProcess: '/workReport/payment/getProcess',
        myPermission: '/workReport/project/myPermission',
        codes: '/manage/codeInfo/queryByTypes',
        getProcessComment: '/workReport/payment/getProcessComment',
        flowNode: '/workReport/payment/flowNode',
        startFlow: '/workReport/payment/startFlow',
      },
      approvalActions: {
        passUrl: '/workReport/payment/updateStatus/' + this.paymentId,
        rejectUrl: '/workReport/payment/updateStatus/' + this.paymentId,
        changeHasPost: '/workReport/payment/changeHasPost/' + this.paymentId + '/1',
      },
      labelCol: { span: 8 },
      wrapperCol: { span: 15 },
      task: {},
      result: {},
      project: { waterAndElectricityPay: '1' },
      showDeptSelector: false,
      showUserSelector: false,
      deptCode: '-1',
      userSelectType: 'apply',
      qualityQuery: {
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '20', '30'],
        showTotal: (total, range) => {
          return range[0] + '-' + range[1] + ' 共' + total + '条'
        },
        total: 0,
      },
      columns: [
        {
          title: '质量通知单',
          dataIndex: 'qualityNo',
          width: '25%',
          align: 'center',
          scopedSlots: { customRender: 'qualityNoRender' },
        },
        {
          title: 'OA流水号',
          dataIndex: 'oaLsh',
          width: '15%',
          align: 'center',
          scopedSlots: { customRender: 'oaLshRender' },
        },
        {
          title: '违约类型',
          dataIndex: 'qualityType',
          width: '15%',
          align: 'center',
          scopedSlots: { customRender: 'qualityTypeRender' },
        },
        {
          title: '审批扣罚金额',
          dataIndex: 'spFineAmount',
          width: '10%',
          align: 'center',
        },
        {
          title: '开票金额',
          width: '10%',
          align: 'center',
          scopedSlots: { customRender: 'reduceRender' },
        },
        {
          title: '本次扣罚',
          width: '10%',
          align: 'center',
          scopedSlots: { customRender: 'fineRender' },
        },
        {
          title: '状态',
          width: '10%',
          align: 'center',
          scopedSlots: { customRender: 'statusRender' },
        },
        {
          title: '来源',
          dataIndex: 'platForm',
          width: '10%',
          align: 'center',
        },
      ],
      psQualityRecords: [],
      hteQualityRecords: [],
      qualityRecords: [],
      showFlowForm: false,
      muti: false,
      flow: {},
      process: { taskDefKey: '' },
      permission: [],
      fineAmountTotal: 0,
      reduceAmountTotal: 0,
      codes: {},
      comments: [],
      showPrintContainer: false,
      showSettlementDetail: false,
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    calcDaysBetween,
    formatDate,
    init() {
      if (this.taskId != '-1') {
        this.fetchTask(this.taskId)
        this.fetchResult(this.taskId)
      }
      if (this.paymentId != '-1') {
        this.fetchPayment()
      }
      this.calcReduce()
      this.fetchCodes()
    },
    fetchCodes() {
      getAction(this.urls.codes, {
        types:
          'WorkReportResultType,WorkReportResultStatus,WorkReportDelayReson,WorkReportNodeStatus,WorkReportDelayRemark,FileCondition,WorkReportQualityStatus',
      }).then((res) => {
        if (res.success) {
          this.codes = { ...this.codes, ...res.result }
          this.$set(this.codes, 'WorkReportDelayRemarkFilter', this.codes.WorkReportDelayRemark)
        }
      })
    },
    fetchPermission() {
      getAction(this.urls.myPermission, { projectId: this.task.projectId }).then((res) => {
        if (res.success) {
          this.permission = res.result
        }
      })
    },
    checkPermission(powers) {
      let hasPower = false
      for (let p of powers) {
        if (this.permission.indexOf(p) > -1) {
          hasPower = true
          break
        }
      }
      return hasPower
    },
    fetchPayment() {
      getAction(this.urls.payment + '/' + this.paymentId, {}).then((res) => {
        if (res.success) {
          this.payment = res.result
          if (!this.payment) {
            this.payment = {}
          } else {
            this.fetchTask(this.payment.taskId)
            this.fetchResult(this.payment.taskId)
            this.initQuality()
          }
          if (this.payment.payByLetter != '是') {
            this.$set(this.payment, 'payByLetter', '否')
          }
        }
      })
    },
    async fetchProcessComment(flowId) {
      if (!flowId) {
        return
      }
      let res = await getAction(this.urls.getProcessComment + '/' + flowId, {})
      if (res.success) {
        this.comments = res.result
      } else {
        this.$messageWorkReport.error(res.message)
      }
    },
    fetchProcess(flowId) {
      getAction(this.urls.getProcess + '/' + flowId, {}).then((res) => {
        if (res.success) {
          this.process = res.result
          if (!this.process) {
            this.process = { taskDefKey: '' }
          }
        } else {
          this.$messageWorkReport.error(res.message)
        }
      })
    },
    fetchTask(taskId) {
      getAction(this.urls.task + '/' + taskId, {}).then((res) => {
        if (res.success) {
          this.task = res.result
          // 校验必填项
          if (this.task.nodeIdentify != '验收') {
            this.$set(this.rules, 'acceptDept', [])
            this.$set(this.rules, 'acceptUserName', [])
            this.$set(this.rules, 'equipmentAddr', [])
            this.$set(this.rules, 'warrantyYears', [])
            this.$set(this.rules, 'projectAddr', [])
          }
          this.fetchProject()
          this.fetchPermission()
          this.$set(this.payment, 'poLine', this.task.poLine)
          if (!this.payment.postAmount || !this.payment.payAmount) {
            this.calcReduce()
          }
        }
      })
    },
    fetchProject() {
      getAction(this.urls.project + '/' + this.task.projectId, {}).then((res) => {
        if (res.success) {
          if (res.result && res.result.poLineCount) {
            res.result.poLineCountCopy = '共' + res.result.poLineCount + '行'
          }
          this.project = res.result
          if (!this.project.waterAndElectricityPay) {
            this.$set(this.project, 'waterAndElectricityPay', '1')
          }
          this.$set(this.payment, 'contractName', this.project.contractName)
          this.fetchQualityList()
        }
      })
    },
    fetchResult(taskId) {
      getAction(this.urls.result + '/' + taskId + '/0', {}).then((res) => {
        if (res.success) {
          this.result = res.result
        }
      })
    },

    handleSave(type = 0) {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.$set(this.payment, 'taskId', this.task.id)
          postAction(this.urls.editPayment, this.payment).then((res) => {
            if (res.success) {
              this.init()
              this.$messageWorkReport.success('保存成功')
              if (type == 1) {
                this.openProcessUserSelect
              }
            } else {
              this.$messageWorkReport.error('保存失败:' + res.msg)
            }
          })
        }
      })
    },
    openProcessUserSelect(){
      if (this.payment.id != '-1') {
        getAction(this.urls.flowNode + '?id=' + this.payment.id, {}).then((res) => {
          if(res.success){
            this.$refs.ProcessUserSelect.doSelect(res.result)
          }else{
            this.$messageWorkReport.warning(res.message)
          }
        })
      }
    },
    selectUserConfirm(cols){
      if (this.process.taskDefKey == 'APPLY_USER_NODE') {
        cols.forEach(c => {
          if (c.value && c.value != null) {
            this.$set(this.custom, c.node, c.value)
          } else {
            this.$set(this.custom, c.node, '')
          }
        })
        this.$refs.childrenRef.custom = this.custom
        this.$refs.childrenRef.submitTaskNotBefore()
        return
      }
      postAction(this.urls.startFlow+"?id="+this.payment.id, cols).then((res) => {
          if (res.success) {
            this.$messageWorkReport.success("提交成功");
            this.init()
          } else {
            this.$messageWorkReport.error(res.message)
          }
        })
    },
    handleSubmit() {
      if (!this.payment.payByLetter) {
        return this.$messageWorkReport.warning('请选择凭保证函付款')
      }
      if (!this.payment.fileCondition) {
        return this.$messageWorkReport.warning('请选择合同资料情况')
      }
      if (!this.payment.proManager) {
        return this.$messageWorkReport.warning('请选择项目经理')
      }
      if (this.task.nodeIdentify == '验收') {
        if (!this.payment.warrantyYears) {
          return this.$messageWorkReport.warning('请输入质保期限')
        }
        if (!this.payment.acceptDept) {
          return this.$messageWorkReport.warning('请输入验收参与部门')
        }
        if (!this.payment.acceptUserName) {
          return this.$messageWorkReport.warning('请输入验收参与人')
        }
        if (!this.payment.projectAddr) {
          return this.$messageWorkReport.warning('请输入项目所在地')
        }
        if (!this.payment.equipmentAddr) {
          return this.$messageWorkReport.warning('请输入设备所在位置')
        }
      }
      this.handleSave(1)
    },
    closeFlowForm() {
      this.showFlowForm = false
    },
    toPayment() {
      this.$set(this.payment, 'isSendPay', 1)
    },
    openDeptSelector() {
      this.showDeptSelector = true
    },
    selectDept(selection) {
      let acceptDeptId = this.payment.acceptDeptId
      if (selection && selection.length > 0) {
        this.$set(this.payment, 'acceptDept', selection[0].deptname.trim())
        this.$set(this.payment, 'acceptDeptId', selection[0].deptcode.trim())
        if (acceptDeptId != selection[0].deptcde) {
          this.acceptUserId = ''
          this.acceptUserName = ''
        }
      }
      this.showDeptSelector = false
    },
    openAcceptSelector() {
      if (!this.payment.acceptDeptId) {
        return this.$messageWorkReport.warning('请先选择参与验收部门')
      }
      this.deptCode = this.payment.acceptDeptId
      this.userSelectType = 'accept'
      this.showUserSelector = true
      this.muti = true
    },
    toCalcReduce(index, type) {
      let records = [...this.qualityRecords]
      records[index][type] = this.qualityRecords[index][type]
      this.qualityRecords = records
      this.calcReduce()
    },
    calcReduce() {
      let reduceQuality = []
      let reduceTotal = 0
      let fineQuality = []
      let fineTotal = 0
      for (let q of this.qualityRecords) {
        if (q.reduce == '1') {
          reduceTotal += parseFloat(q.spFineAmount ? q.spFineAmount : 0)
        }
        if (q.fine == '1') {
          fineTotal += parseFloat(q.spFineAmount ? q.spFineAmount : 0)
        }
        reduceQuality.push(q.id + '_' + (q.reduce ? q.reduce : ''))
        fineQuality.push(q.id + '_' + (q.fine ? q.fine : ''))
      }
      let payAmount = this.task.paymentAmount - fineTotal
      payAmount = payAmount.toFixed(2)
      let postAmount = this.task.paymentAmount - reduceTotal
      postAmount = postAmount.toFixed(2)
      this.$set(this.payment, 'payAmount', payAmount)
      this.$set(this.payment, 'postAmount', postAmount)

      reduceTotal = reduceTotal.toFixed(2)
      this.$set(this.payment, 'reduceAmount', reduceTotal)
      this.$set(this.payment, 'reduceQuality', reduceQuality.join(','))

      fineTotal = fineTotal.toFixed(2)
      this.$set(this.payment, 'fineAmount', fineTotal)
      this.$set(this.payment, 'fineQuality', fineQuality.join(','))
    },
    selectUser(selection) {
      if (selection && selection.length > 0) {
        if (this.userSelectType == 'accept') {
          let userName = []
          let realName = []
          selection.forEach((user) => {
            userName.push(user.username.trim())
            realName.push(user.realname.trim())
          })
          this.$set(this.payment, 'acceptUserId', userName.join(','))
          this.$set(this.payment, 'acceptUserName', realName.join(','))
        }
        if (this.userSelectType == 'apply') {
          if (selection.length > 0) {
            this.$set(this.payment, 'applyUserId', selection[0].username.trim())
            this.$set(this.payment, 'applyUserName', selection[0].realname.trim())
            this.$set(this.payment, 'applyDeptId', selection[0].deptCode.trim())
            this.$set(this.payment, 'applyDept', selection[0].deptName.trim())
          }
        }
        if (this.userSelectType == 'manager') {
          if (selection.length > 0) {
            this.$set(this.payment, 'proDeptManager', selection[0].realname.trim())
            this.$set(this.payment, 'proDeptManagerId', selection[0].username.trim())
          }
        }
      }
      this.showUserSelector = false
    },
    openUserSelector(type, muti) {
      this.deptCode = '-1'
      this.muti = muti
      this.userSelectType = type
      this.showUserSelector = true
    },
    fetchQualityList() {
      this.fetchPsQualityList()
      this.fetchHteQualityList()
    },
    fetchPsQualityList() {
      let param = {}
      param.poNo = this.project.busKey
      param.pageSize = 10000
      param.type = 'all'
      postAction(this.urls.psQualityList, param).then((res) => {
        if (res.success) {
          this.psQualityRecords = res.result.records
          this.psQualityRecords.forEach((r) => {
            r.platForm = '海澜'
          })
          this.qualityRecords = [...this.psQualityRecords, ...this.hteQualityRecords]
          this.initQuality()
        }
      })
    },
    fetchHteQualityList() {
      let param = {}
      param.poNo = this.project.busKey
      param.type = 'all'
      postAction(this.urls.hteQualityList, param).then((res) => {
        if (res.success) {
          this.hteQualityRecords = res.result //.records
          this.hteQualityRecords.forEach((r) => {
            r.platForm = '海芯'
          })
          // this.$set(this.qualityIpagination, 'total', res.result.total)
          this.qualityRecords = [...this.psQualityRecords, ...this.hteQualityRecords]
          this.initQuality()
        }
      })
    },
    initQuality() {
      if (this.qualityRecords && this.payment && this.payment.reduceQuality) {
        let reduceQuality = this.payment.reduceQuality.split(',')
        this.qualityRecords.forEach((r) => {
          if (this.payment.fineQuality.indexOf('_') <= -1) {
            if (reduceQuality.indexOf(r.id + '') > -1) {
              r.reduce = '1'
            } else {
              r.reduce = '0'
            }
          } else {
            if (reduceQuality.indexOf(r.id + '_1') > -1) {
              r.reduce = '1'
            }
            if (reduceQuality.indexOf(r.id + '_0') > -1) {
              r.reduce = '0'
            }
            if (reduceQuality.indexOf(r.id + '_') > -1) {
              r.reduce = ''
            }
          }
        })
      }
      if (this.qualityRecords && this.payment && this.payment.fineQuality) {
        let findQuality = this.payment.fineQuality.split(',')
        this.qualityRecords.forEach((r) => {
          if (this.payment.fineQuality.indexOf('_') <= -1) {
            if (findQuality.indexOf(r.id + '') > -1) {
              r.fine = '1'
            } else {
              r.fine = '0'
            }
          } else {
            if (findQuality.indexOf(r.id + '_1') > -1) {
              r.fine = '1'
            }
            if (findQuality.indexOf(r.id + '_0') > -1) {
              r.fine = '0'
            }
            if (findQuality.indexOf(r.id + '_') > -1) {
              r.fine = ''
            }
          }
        })
      }
    },
    handleTableChange(pagination, filters, sorter) {
      this.qualityQuery = pagination
      this.qualityQuery.pageNo = this.qualityQuery.current
      this.fetchQualityList()
    },

    toQuality(record) {
      let urlJump = this.$router.resolve({ path: '/workReport/quality/view/' + record.id + '/' + this.taskId })
      if (record.platForm != '海澜') {
        urlJump = this.$router.resolve({ path: '/workReport/quality/edit/' + record.id})
      }
      window.open(urlJump.href, '_blank')
    },
    toTaskDetail() {
      let urlJump = this.$router.resolve({ path: '/workReport/taskDetail/' + this.task.id })
      window.open(urlJump.href, '_blank')
    },
    toContractAttach() {
      let urlJump = this.$router.resolve({ path:'/workReport/attach/' + this.project.id })
      window.open(urlJump.href, '_blank')
    },
    async submitSave() {
      this.$set(this.payment, 'taskId', this.task.id)
      let res = await postAction(this.urls.editPayment, this.payment)
      if (res.success) {
        this.payment = res.result
        this.$messageWorkReport.success('保存成功')
        return true
      } else {
        this.$messageWorkReport.error('保存失败:' + res.msg)
        return false
      }
    },
    changeWarrantyYears() {
      let applyTime = this.payment.applyTime
      if (!applyTime) {
        applyTime = new Date()
      } else {
        applyTime = new Date(applyTime)
      }
      let warrantyYears = this.payment.warrantyYears
      if (warrantyYears) {
        warrantyYears = applyTime.getMonth() + 1 + parseInt(warrantyYears)
        applyTime.setYear(applyTime.getFullYear() + parseInt(parseInt(warrantyYears) / 12))
        let month = parseInt(parseInt(warrantyYears) % 12)
        let years = applyTime.getFullYear()
        if (month == 0) {
          month = 12
          years = years - 1
        }
        this.$set(this.payment, 'warrantyTime', years + '-' + month + '-' + applyTime.getDate())
      }
    },
    async print() {
      await this.fetchProcessComment(this.flow.flowId)
      this.$printer(this.$refs.printContainer)
    },
    async updateStatus() {
      await getActionAsync(this.approvalActions.passUrl, {}).then((res) => {
        if (res.code == 200) {
          this.$messageWorkReport.success('更新成功')
        } else {
          this.$messageWorkReport.warning('流程审批通过接口异常:' + res.message)
        }
      })
    },
    openSettlementDetail() {
      this.showSettlementDetail = true
    },
    closeSettlementDetail() {
      this.showSettlementDetail = false
    },
    toQualityListByPo() {
      if (this.project.busKey) {
        let urlJump = this.$router.resolve({ path:'/workReport/qualityList/' + this.project.busKey })
      window.open(urlJump.href, '_blank')
      }
    },
    toTaskList() {
      if (this.project.id) {
        let urlJump = this.$router.resolve({path: '/workReport/taskList?projectId=' + this.project.id })
      window.open(urlJump.href, '_blank')
      }
    },
  },
  watch: {
    taskId(newV, oldV) {
      if (newV != '-1') {
        this.fetchTask()
        this.fetchResult()
      }
    },
    paymentId(newV, oldV) {
      if (newV != '-1') {
        this.fetchPayment()
      }
    },
    'task.complateTime': {
      handler(newV, oldV) {
        if (this.task.complateTime) {
          let temp = this.calcDaysBetween(
            this.task.complateTime + ' 23:59:59.999',
            this.task.status >= 6 && this.result.result == '质量合格' && this.result.actualTime ? this.result.actualTime + ' 23:59:59.999' : ''
          )
          this.$set(this.result, 'nodeStatus', temp.status)
          if (temp.status != '正常') {
            this.$set(this.result, 'nodeDelayDays', temp.days)
          } else {
            this.$set(this.result, 'nodeDelayDays', 0)
          }
        }
      },
      immediate: true,
    },
    'result.actualTime': {
      handler(newV, oldV) {
        if (this.task.complateTime) {
          let temp = this.calcDaysBetween(
            this.task.complateTime + ' 23:59:59.999',
            this.task.status >= 6 && this.result.result == '质量合格' && this.result.actualTime ? this.result.actualTime + ' 23:59:59.999' : ''
          )
          this.$set(this.result, 'nodeStatus', temp.status)
          if (temp.status != '正常') {
            this.$set(this.result, 'nodeDelayDays', temp.days)
          } else {
            this.$set(this.result, 'nodeDelayDays', 0)
          }
        }
      },
      immediate: true,
    },
  },
}
</script>

<style lang="less" scoped>
@import '~@assets/less/hte-main.less';

.page-main {
  .container {
    .content {
      margin-top: 20px;

      section {
        padding: 32px 29px 20px;
        background: #fff;
        margin-bottom: 18px;
        border: solid 1px #e2e2e2;

        .section-header {
          font-size: 16px;
          font-weight: bold;
          position: relative;
          padding-left: 14px;
          color: #333333;
          margin-bottom: 14px;

          &:before {
            &:extend(.afterbg);
            width: 3px;
            left: 0;
            background-color: #47a4fa;
            border-radius: 1px;
          }
        }

        .col-input-2 {

          /deep/ .ant-select,
          /deep/ input {
            width: 49%;

            &:first-child {
              margin-right: 2%;
            }
          }

          &.col-input-font /deep/ .ant-select-selection-selected-value,
          &.col-input-font /deep/ .ant-input {
            color: #de2626 !important;
          }
        }

        .section-table {
          .mr10 {
            margin-right: 10px;
          }

          .btn-box {
            margin-bottom: 15px;

            .hte-btn:first-child {
              margin-left: 0;
            }
          }

          .add-btn {
            margin-left: 0;
            margin-bottom: 10px;
          }

          /deep/ .el-upload__input {
            display: none !important;
          }
        }

        .line-section {
          padding: 15px 0;
          margin-top: 40px;
          border-top: 1px solid #f2f2f2;
          color: #333;
          display: flex;
          justify-content: space-between;

          span {
            padding-right: 25px;

            &:first-child {
              font-weight: bold;
              font-size: 15px;
            }

            i {
              color: red;
            }
          }

          div>i {
            color: @font-color-active;
          }
        }
      }
    }
  }

  .tips-box {
    margin-top: 32px;

    .add-btn {
      width: 180px;
      height: 40px;
      line-height: 40px;
      background-color: #4095e4;
      border-radius: 2px;
    }
  }
}
</style>
<style scoped>
#printContainer {
  text-align: center;
  color: black;
}

#printContainer table {
  background-color: black;
}

#printContainer table td {
  background-color: white;
}

#printContainer .label {
  font-size: 14px;
  text-align: center;
  font-weight: bold;
}

.pageTitle {
  font-size: 21px;
  font-weight: bold;
  text-align: center;
}

td {
  font-size: 14px;
  height: 30px;
  padding: 5px 5px;
  background: white;
  text-align: left;
}

table {
  border: solid black;
  border-width: 1.5px 1.5px 1.5px 1.5px;
  width: 690px;
  table-layout: fixed;
  background: black;
}

.el-checkbox__label {
  padding-left: 0px !important;
  padding-right: 10px !important;
}

.el-checkbox>>>.el-checkbox__input.is-disabled .el-checkbox__inner {
  background-color: white !important;
  border-color: black !important;
  cursor: not-allowed;
}

.el-checkbox>>>.el-checkbox__input.is-disabled+span.el-checkbox__label {
  color: black !important;
  cursor: not-allowed;
}

.el-checkbox>>>.el-checkbox__input.is-disabled.is-checked .el-checkbox__inner::after {
  border-color: black !important;
}

.el-form-item>>>.el-form-item__error {
  color: #ff4949;
  font-size: 12px;
  line-height: 1;
  padding-top: 4px;
  position: relative;
  top: 100%;
  left: 0;
}
</style>

